<template>
  <div class="manage">
    <div style="margin: 10px">
      <el-input v-model="form.name" placeholder="请输入目标名称" style="max-width: 260px;margin-right: 5px"
                class="filter-item"
      />
      <el-select v-model="form.enable" placeholder="请选择启用状态" clearable>
        <el-option v-for="(item,index) in [{status:0,name:'未启用'},{status:1,name:'已启用'}]" :label="item.name"
                   :value="item.status"></el-option>
      </el-select>
      <el-button class="filter-item" type="danger" icon="el-icon-search" @click="searchTarget"
                 style="margin-bottom: 5px;margin-left: 10px"
      >
        查找
      </el-button>

      <el-button class="filter-item" type="" icon="el-icon-refresh" @click="clean"
                 style="margin-bottom: 5px;margin-left: 10px"
      >
        重置
      </el-button>
    </div>

    <el-dialog title="碳目标信息" :visible.sync="dialogFormVisible" width="90%">
      <el-descriptions title="" :column="1">
        <el-descriptions-item label="目标名称">{{ detail.name }}</el-descriptions-item>
        <el-descriptions-item label="碳排放目标">{{ detail.targetAmount }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ detail.remark }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag v-if="detail.enable === 0" type="danger" size="small">未启用</el-tag>
          <el-tag v-if="detail.enable === 1" type="success" size="small">启用中</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="目标范围">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :icon="activity.icon"
              :type="activity.type"
              :color="activity.color"
              :size="activity.size"
              :timestamp="activity.timestamp">
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </el-descriptions-item>
        <el-descriptions-item label="统计阶段">
          <el-tag v-for="item in detail.stageList" type="plain" style="margin-right: 5px">
            {{ item }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="统计工序">
          <el-tag v-for="item in detail.processList" type="info" effect="plain" style="margin-right: 5px">
            {{ item }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="碳预警占比">
        </el-descriptions-item>
      </el-descriptions>
      <el-progress :text-inside="true" :stroke-width="26" :percentage="detail.percentage" :color="customColor"></el-progress>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑碳目标" :visible.sync="editTargetVisible" width="95%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <el-form-item label="目标名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="目标范围" required>
          <div class="block">
            <el-date-picker
              v-model="dateRange"
              type="monthrange"
              value-format="yyyy-MM"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="统计阶段" prop="stageList">
          <el-checkbox-group v-model="ruleForm.stageList">
            <el-checkbox v-for="item in stages" :label="item.name" name="stageList"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="统计工序" prop="processList">
          <el-checkbox-group v-model="ruleForm.processList">
            <el-checkbox v-for="item in processes" :label="item.processName" name="processList"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="目标碳排放" prop="targetAmount">
          <el-input-number v-model="ruleForm.targetAmount" style="min-width: 500px;" :min="0.00" size="large"
                           :precision="2" :step="0.01"></el-input-number>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="ruleForm.remark"></el-input>
        </el-form-item>
        <el-form-item label="预警百分比">
          <br>
          <div>
            <el-slider
              v-model="ruleForm.warningPercent"
              show-input>
            </el-slider>
          </div>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editTargetVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmEdit">确 定</el-button>
      </span>
    </el-dialog>

    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="序号"
        min-width="40"
      >
        <template slot-scope="scope">
          {{ scope.$index + 1 + (form.pageNum - 1) * form.pageSize }}
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        min-width="150">
      </el-table-column>
      <el-table-column
        prop="targetAmount"
        label="碳排放目标"
        min-width="120">
        <template slot-scope="scope">
          <el-tag effect="dark" type="info" style="font-family: 微软雅黑,serif">
            {{ scope.row.targetAmount }} tCO2
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="remark"
        label="备注"
        min-width="250">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        max-width="80">
      </el-table-column>
      <el-table-column
        prop="province"
        label="启用状态"
        width="120">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.enable!==0" @change="changeEnable(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small" :disabled="scope.row.enable === 1" @click="editTarget(scope.row)">编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--  分页  -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="form.pageNum"
      :page-sizes="[5, 10, 20, 30, 40, 50]"
      :page-size="form.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>

import {editTarget, enableTarget, queryTargetPage, unEnableTarget} from "@/api/carbon-manage/target";
import {listStage} from "@/api/carbon-manage/data";
import {queryAllProcess} from "@/api/carbon-manage/process";

export default {
  data() {
    return {
      activities: [{
        content: '开始日期',
        timestamp: '2018-04-12 20:46',
        size: 'large',
        type: 'primary',
        color: '#c2e0c9'
      }, {
        content: '结束日期',
        timestamp: '2018-04-03 20:46',
        color: '#fa8888'
      }],
      detail: {
        id: -1,
        name: '',
        beginDate: '',
        endDate: '',
        enable: false,
        stageList: [],
        processList: [],
        targetAmount: 0,
        remark: '',
        percentage: 0,
      },
      percentage: 90,
      customColor: '#409eff',
      customColors: [
        {color: '#f56c6c', percentage: 20},
        {color: '#e6a23c', percentage: 40},
        {color: '#5cb87a', percentage: 60},
        {color: '#1989fa', percentage: 80},
        {color: '#6f7ad3', percentage: 100}
      ],
      dialogFormVisible: false,
      editTargetVisible: false,
      formLabelWidth: '90px',
      total: 0,
      form: {
        pageNum: 1,
        pageSize: 10,
        name: '',
        enable: '',
      },
      tableData: [],
      ruleForm: {
        id: -1,
        name: '',
        beginDate: '',
        endDate: '',
        enable: false,
        stageList: [],
        processList: [],
        targetAmount: 0,
        remark: '',
        warningPercent: 0,
      },
      stages: [],
      processes: [],
      dateRange: [],
      rules: {
        name: [
          {required: true, message: '请输入活动名称', trigger: 'blur'},
        ],
        processList: [
          {type: 'array', required: true, message: '请至少选择一个工序', trigger: 'change'}
        ],
        beginDate: [
          {type: 'date', required: true, message: '请选择开始日期', trigger: 'change'}
        ],
        endDate: [
          {type: 'date', required: true, message: '请选择结束日期', trigger: 'change'}
        ],
        stageList: [
          {type: 'array', required: true, message: '请至少选择一个生产阶段', trigger: 'change'}
        ],
        targetAmount: [
          {required: true, message: '请输入目标碳排放', trigger: 'change'}
        ]
      }
    }
  },
  mounted() {
    this.loadData();
    listStage().then(res => {
      this.stages = res.data;
    });
    queryAllProcess().then(res => {
      this.processes = res.data;
    });
  },
  methods: {
    confirmEdit() {
      this.ruleForm.beginDate = this.dateRange[0];
      this.ruleForm.endDate = this.dateRange[1];
      editTarget(this.ruleForm).then(res => {
        if (res.code === 200) {
          this.editTargetVisible = false;
          this.$message.success('编辑成功');
          this.loadData();
        }
      })
    },
    editTarget(item) {
      this.ruleForm.id = item.id;
      this.editTargetVisible = true;
      this.ruleForm.name = item.name;
      this.dateRange = [];
      this.dateRange.push(item.beginDate);
      this.dateRange.push(item.endDate);
      this.ruleForm.remark = item.remark;
      this.ruleForm.targetAmount = item.targetAmount;
      this.ruleForm.processList = JSON.parse(item.processList);
      this.ruleForm.stageList = JSON.parse(item.stageList);
      this.ruleForm.warningPercent = item.warningPercent;
    },
    clean() {
      this.form.name = '';
      this.form.enable = ''
      this.loadData();
    },
    searchTarget() {
      this.loadData();
    },
    async changeEnable(item) {
      if (item.enable === 0) {
        await enableTarget(item.id).then(res => {
          this.$message.success('启用成功');
        })
      } else {
        await unEnableTarget(item.id).then(res => {
          this.$message.success('禁用成功');
        })
      }
      await this.loadData();
    },
    loadData() {
      queryTargetPage(this.form).then(res => {
        this.tableData = res.data.rows;
        this.total = res.data.total;
      })
    },
    handleClick(row) {
      this.detail.name = row.name;
      this.detail.id = row.id;
      this.detail.remark = row.remark;
      this.detail.targetAmount = row.targetAmount;
      this.detail.beginDate = row.beginDate;
      this.detail.endDate = row.endDate;
      this.activities = [{
        content: '开始日期',
        timestamp: row.beginDate,
        size: 'large',
        type: 'primary',
        color: '#c2e0c9'
      }, {
        content: '结束日期',
        timestamp: row.endDate,
        color: '#fa8888'
      }];
      this.detail.processList = JSON.parse(row.processList);
      this.detail.stageList = JSON.parse(row.stageList);
      this.dialogFormVisible = true;
      this.detail.enable = row.enable;
      this.detail.percentage = row.warningPercent;
      console.log(this.detail)
    },
    handleSizeChange(pageSize) {
      this.form.pageSize = pageSize
      this.loadData();
    },
    handleCurrentChange(pageNum) {
      this.form.pageNum = pageNum
      this.loadData();
    },
  },

}
</script>

<style scoped lang="scss">

</style>
